<template>
  <div class="lists">
    <ul>
      <!-- <router-link tag="li" to="/" v-for="item in list" :key="item">{{item}}</router-link> -->
      <router-link tag="li" to="/home/tj" active-class="active1">热门推荐</router-link>
      <router-link tag="li" to="/home/hh" active-class="active1">发现好货</router-link>
      <router-link tag="li" to="/home/zc" active-class="active1">只看专场</router-link>
      <router-link tag="li" to="/home/sp" active-class="active1">只看商品</router-link>
    </ul>
    <div class="main">
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // list: ["热门推荐", "发现好货", "只看专场", "只看商品"],
      // num: 0,
      // names: ["vOne", "vTwo", "vThree", "vFour"],
      // name: "vOne",
    };
  },
  methods: {
    // change(i) {
    //   this.num = i;
    //   this.name = this.names[i];
    // },
  },
  components: {
  },
  mounted(){
    console.log(this);
  }
};
</script>

<style scoped>
.lists{
  width: 7.5rem;
}
ul {
  list-style: none;
  display: flex;
  /* height: 0.5rem; */
  line-height: 0.5rem;
}
ul li {
  flex: 1;
  font-size: 0.2rem;
  padding: 0.05rem 0;
  color: #333;
  text-align: center;
}
/* .active {
  background-color: orangered;
  color: #fff;
} */
.main {
  width: 7.1rem;
  overflow: hidden;
  padding: 0.2rem;
}
.active1{
   background-color: orangered;
  color: #fff;
}

</style>